<template>
	<view class="l-pagination" :class="{'l-pagination--disabled': disabled}" :style="[styles]">
		
		<view @click="update(innerValue - 1)" v-if="showPrevButton || $slots['prev']">
			<slot name="prev" :disabled="innerValue == 1 || disabled">
				<button
					class="l-pagination__item l-pagination__prev" 
					:disabled="innerValue == 1 || disabled"
					:class="{'l-pagination__item--disabled': innerValue == 1 || disabled}">
					{{ prevText }}
				</button>
			</slot>
		</view>
		<text v-if="simple" class="l-pagination__simple">{{ innerValue}}/{{totalPages}}</text>
		<template v-if="!simple">
			<!-- #ifdef VUE2 -->
			<view v-for="(page, index) in pageItems" 
				:key="page.pageNumber" @click="update(page.pageNumber)">
				<slot name="page" :label="label" :active="page.isActive">
					<button
						:style="[page.isActive && activeStyle]"
						class="l-pagination__item l-pagination__item--page"  
						:class="{'l-pagination__item--active': page.isActive}">
						{{page.label}}
					</button>
				</slot>
			</view>
			<!-- #endif -->
			<!-- #ifdef VUE3 -->
			<view 
				v-for="(page, index) in pageItems" 
				:key="page.pageNumber + page.label +  index" @click="update(page.pageNumber)">
				<slot name="page" :label="label" :active="page.isActive">
					<button
						:style="[page.isActive && activeStyle]"
						class="l-pagination__item l-pagination__item--page"  
						:class="{'l-pagination__item--active': page.isActive}">
						{{page.label}}
					</button>
				</slot>
			</view>
			<!-- #endif -->
		</template>
		
		<view @click="update(innerValue + 1)" v-if="showNextButton || $slots['next']">
			<slot name="next" :disabled="innerValue == totalPages || disabled">
				<button
					class="l-pagination__item l-pagination__next" 
					:disabled="innerValue == totalPages || disabled"
					:class="{'l-pagination__item--disabled': innerValue == totalPages || disabled}">
					{{ nextText }}
				</button>
			</slot>
		</view>
	</view>
</template>
<script lang="ts">
	// @ts-nocheck
	import { defineComponent, ref, computed } from '@/uni_modules/lime-shared/vue';
	import paginationProps from './props';
	import { generatePaginationItems } from './utils';
	
	export default defineComponent({
		name: 'l-pagination',
		props: paginationProps,
		emits: ['change', 'input', 'update:modelValue'],
		setup(props, {emit}) {
			const _modelValue = ref(0);
			const innerValue = computed({
				set(value: number) {
					_modelValue.value = value;
					emit('update:modelValue', value)
					// #ifdef VUE2
					emit('input', value)
					// #endif
				},
				get():number {
					const _value = props.value || props.innerValue || _modelValue.value ;
					return _value > totalPages.value ? totalPages.value : _value
				},
			})
			
			const styles = computed(()=>{
				const style:Record<string, any> = {}
				if(props.itemWidth) {
					style['--l-pagination-item-width'] = props.itemWidth!
				}
				if(props.itemHeight) {
					style['--l-pagination-item-height'] = props.itemHeight!
				}
				if(props.radius) {
					style['--l-pagination-border-radius'] = props.radius!
				}
				if(props.borderColor) {
					style['--l-pagination-border-color'] = props.borderColor!
				}
				
				if(props.fontSize) {
					style['--l-pagination-font-size'] =  props.fontSize!
				}
				if(props.bgColor) {
					style['--l-pagination-bg-color'] =  props.bgColor!
				}
				if(props.color) {
					style['--l-pagination-text-color'] =  props.color!
				}
				if(props.activeBgColor) {
					style['--l-pagination-active-bg-color'] =  props.activeBgColor!
				}
				if(props.activeColor) {
					style['--l-pagination-active-text-color'] =  props.activeColor!
				}
				return style
			})
			const activeStyle = computed(()=>{
				const style:Record<string, any> = {}
				if(props.activeBgColor) {
					style['--l-pagination-active-bg-color'] =  props.activeBgColor!
					style['--l-pagination-border-color'] =  props.activeBgColor!
				}
				return style
			})
			const totalPages = computed(():number=>{
				return Math.max(1, Math.ceil(props.total / props.pageSize))
			})
			const pageItems = computed(():PaginationItem[]=>{
				return generatePaginationItems(totalPages.value, props.pagerCount, innerValue.value, props.forceEllipses)
			})
			const update = (page: number)=>{
				if(props.disabled) return
				const _page = Math.max(1, Math.min(page, totalPages.value));
				if(_page != innerValue.value) {
					innerValue.value = _page
					emit('change', _page)
				}
			}
			return {
				styles,
				activeStyle,
				innerValue,
				totalPages,
				pageItems,
				update
			}
		}
	})
	
</script>
<style lang="scss">
	@import './index';
</style>
